<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE >
<html>
  <head>
    
    <title>zdatagrid</title>
    <jsp:include page="/common/inc/meta.jsp"></jsp:include>
    <jsp:include page="/common/inc/easyui.jsp"></jsp:include>
    
  <script type="text/javascript">
  	var testZdatagrid;
  	var testDialog;
  	var testDialogAddForm;
  	$(function(){
  		//定义表单
  		testDialogAddForm=$('#testDialogAddForm').form();
  		/*支持回车提交form表单*/
  		testDialogAddForm.find('input').on('keyup',function(event){
  			if(event.keyCode=='13'){
  				testDialogAddForm.submit();
  			}
  		});
  		//定义Dialog
		 testDialog=$('#testDialog').dialog({
		 	modal:true,
		 	title:'用户信息',
		 	buttons:[{
		 		text:'确定',
		 		handler:function(){
					if(testDialogAddForm.find('[name=id]').val()!=''){
						testDialogAddForm.form('submit',{
							url:sy.bp()+'/testController.do?updateUser',
							success:function(data){
								testDialog.dialog('close');
								$.messager.show({
									msg:'用户编辑成功！',
									title:'提示'
								});
								testZdatagrid.datagrid('reload');
							}
						});	
					}else{
						testDialogAddForm.form('submit',{
							url:sy.bp()+'/testController.do?addUser',
							success:function(data){
							var d = $.parseJSON(data);
								try{
									if(d.success){
										testDialog.dialog('close');
									    testZdatagrid.datagrid('reload');
										$.messager.show({
											msg:d.msg,
											title:'提示'
										});
									}else{
										testDialog.dialog('close');
									  	testZdatagrid.datagrid('reload');
										$.messager.show({
											msg:d.msg,
											title:'提示'
										});
									}
								}catch(e){
									testDialog.dialog('close');
									$.messager.show({
										msg:'用户名称已经存在！',
										title:'提示'
									});
								}
							}
						});
					}
		 		}
		 	}]
		 }).dialog('close'); 		
  		//定义表格
	  	testZdatagrid=$('#testZdatagrid').datagrid({
	  		title : '表格',
	  		iconCls:'icon-save',
	  		width:950,
	  		height:300,
	  		nowrap:false,
	  		striped:true,
	  		collapsible:true,//true为整个表格可以折叠起来
	  		url:sy.bp()+'/testController.do?datagrid',
	  		sortName:'name',
	  		sortOrder:'desc',
	  		remoteSort:false,
	  		idField:'id',
	  		rownumbers:true,
	  		toolbar:[
	  			'-',{
	  			id:'btnAdd',
	  			text:'添加',
	  			iconCls:'icon-add',
	  			handler:function(){
	  					testDialogAddForm.form('clear');
	  				 	testDialog.dialog('open');
		  			}
	  			},'-',{
	  				id:'btnDelete',
	  				text:'删除',
	  				iconCls:'icon-remove',
	  				handler:function(){
	  				console.info("ddd");
						var ids=[];
						var rows=testZdatagrid.datagrid('getSelections');
						if(rows.length>0){
							$.messager.confirm('请确认','您要删除所选有！',
							function(r){
								if(r){
									for(var i=0;i<rows.length;i++){
										ids.push(rows[i].id);
									}
									$.ajax({
										url:sy.bp()+"/testController.do?del",
										data:{ids:ids.join(',')},
										cache:false,
										dataType:"json",
										success:function(response){
											testZdatagrid.datagrid('unselectAll');
											testZdatagrid.datagrid('reload');
											$.messager.show({
												title:'提示',
												msg:'删除成功！'
											});
										}
									});
								}
							});
						}else{
							$.messager.alert('提示','请选择要删除的记录！','error');
						}
	  				}
	  			},'-',{ 
					id:'btnEdit',
					text:'修改',
					disabled:false,
					iconCls:'icon-edit',
					handler:function(){
						var rows=testZdatagrid.datagrid('getSelections');
						if(rows.length!=1&&rows.length!=0){
							var names=[];
							for(var i=0;i<rows.length;i++){
								names.push(rows[i].name);
							} 
							$.messager.show({
								msg:'只能选择一行编辑！您已经选择了【'
															+ names.join(',')
															+ '】' + rows.length
															+ '个用户',
								title:'提示'									
							});
						}else if(rows.length==1){
							testDialog.dialog('open');
							testDialogAddForm.form('load',{
								id : rows[0].id,
								name : rows[0].name,
								password : '',
								createdatetime : rows[0].createdatetime,
								modifydatetime : rows[0].modifydatetime,
							});
						}else{
							$.messager.show({
								msg :'请选择一个用户进行编辑！',
								title:'提示'
							}); 
						}
					}	  			
	  			}
	  		],
	  		frozenColumns:[[
	  		{
	  			field:'ck',
	  			checkbox:true
	  		},{
	  			title:'用户id',
	  			field:'id',
	  			width:150,
	  			sortable:true//当行点击排序
	  		}]],
	  		columns:[[
	  		{
	  			title:'Base Information',
	  			colspan:4
	  		},{
	  			field:'opt',
	  			title:'Operation',
	  			width:100,
	  			align:'left',
	  			rowspan:2,
	  			formatter:function(value,rec,index){
	  				return value+"-"+rec+"-"+index;
	  			}
	  		}],[{
	  			field:'name',
	  			title:'Name',
	  			width:120
	  		},{
	  			field:'password',
	  			title:'密码',
	  			width:220,
	  			sortable:true,
	  			formatter:function(value,rowData,rowIndex){
	  				return '******'+"---"+value+"---"+rowData.name+"---"+rowIndex;
	  			}
	  		},{
	  			field:'createdatetime',
	  			title:'createdatetime',
	  			width:150,
	  		},{
	  			field:'modifydatetime',
	  			title:'modifydatetime',
	  			width:150,
	  		}]],
	  		pagination:true,
	  		pageSize:2,
	  		pageList:[2,5,10,20]
	  	});
  	});
  </script>
  
  </head>
  <body>
    <table id="testZdatagrid"></table>
    <div id="testDialog" icon="icon-save" style="padding:5px;width:270px;height:230px;">
    	<form id="testDialogAddForm" method="post">
	    	<table class="tableForm">
	    		<tr>
					<td align="right"><input type="hidden" name="id"/>用户名：</td>
					<td><input type="text" name="name" class="easyui-validatebox" required="true" validType="eqTrim['^\\s+']"/></td>
	    		</tr>
	    		<tr>
	    			<td align="right">密码:</td>
	    			<td><input type="password" name="password" class="easyui-validatebox"required="true"/>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td align="right">重复密码：</td>
	    			<td><input type="password" class="easyui-validatebox"required="true"
		    			 validType="eqPassword['#testDialogAddForm input[name=password]']"/></td>
	    		</tr>
	    		<tr>
	    			<td align="right">创建时间</td>
 	    			<td><input id="createUpdate" class="easyui-datetimebox" name="createdatetime" editable="false" style="width:150px"></td>
	    		</tr>
	    		<tr>
	    			<td align="right">修改时间</td>
	    			<td><input id="endUpdate" class="easyui-datetimebox" name="modifydatetime" editable="false" style="width:150px"/></td>
	    		</tr>
	    	</table>
    	</form>
    </div>
  </body>
</html>
